<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="项目" prop="projId">
          <el-select 
          v-loadMore="ajaxMet"
          filterable 
          remote
          v-model="queryParams.projId" 
          :remote-method="boweiSearch"
          placeholder="请选择项目" 
          class="diy-w-full" clearable>
            <el-option
              v-for="(item,index) in projectList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择项目状态" clearable>
            <el-option
              v-for="dict in dict.type.project_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-" 
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <TableCard>
        <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :border="Global.tableShowBorder" v-loading="loading" :data="list">
          <el-table-column label="项目名称" align="center" prop="name"/>
          <el-table-column label="项目类型名称" align="center" prop="typeName"/>
          <el-table-column label="归属部门" align="center" prop="deptId"/>
          <el-table-column label="项目进度百分比" align="center" prop="finishRate"></el-table-column>
          <el-table-column label="项目状态" align="center" prop="status">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.project_status" :value="row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" align="center" prop="startDate"></el-table-column>
          <el-table-column label="结束日期" align="center" prop="endDate"></el-table-column>
          <el-table-column label="项目描述信息" align="center" prop="note" show-overflow-tooltip></el-table-column>
          <el-table-column label="搁置原因" align="center" prop="shelvedReason" show-overflow-tooltip></el-table-column>
          <el-table-column label="终止原因" align="center" prop="abortedReason" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </TableCard>
  </div>
</template>

<script>
import {listProjUser, } from "@/api/collaWorryFree/projectRelatPer";
import {userListAll, } from "@/api/system/user";
import {listAllProjectType,} from "@/api/collaWorryFree/projectType";
import {listProject,} from "@/api/collaWorryFree/project";
import { math } from "@/utils/math";
export default {
  name: "ProjectRelatPer",
  dicts: ['project_status',],
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      xmTotal: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],
      },
      projectList:[],//项目数据
      userList:[],//用户数据
      typeList:[],//类型数据
      // 查询参数
      xmQueryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      xmZongshu:0,//项目下拉总页数
    };
  },
  created() {
    this.userListAll()
    this.listAllProjectType()
    this.getList();
  },
  methods: {
    async userListAll(){//获取用户
      let res = await userListAll()
      let data = res.data || []
      this.userList = data
    },
    async listAllProjectType(){//获取类型
      let res = await listAllProjectType()
      let data = res.data || []
      this.typeList = data
    },
    boweiSearch(e){//项目下拉输入搜索事件
      this.xmQueryParams.pageNum = 1
      this.projectList = []
      this.xmQueryParams.name = e
      this.listAllProjectType(e)
    },
    ajaxMet(){//项目下拉加载事件
      console.log(this.xmZongshu)
      if(this.xmQueryParams.pageNum + 1 > this.xmZongshu) return
      this.xmQueryParams.pageNum = this.xmQueryParams.pageNum + 1
      this.listAllProjectType()
    },
    async listProject(){//获取项目数据
      // let res = await listProject()
      // let rows = res.rows || []
      // this.projectList = rows

      listProject(this.xmQueryParams).then((response) => {
        if (response.code != 200) return;
        let rows = response.rows || []
        if(this.xmQueryParams.pageNum == 1) this.projectList = []
        // 找到不在项目列表的数据
        let list = rows.filter(item=>{
            return !this.projectList.some(i=>item.id == i.id)
          })
        //添加进列表中
        this.projectList = this.projectList.concat(list);
        this.xmTotal = response.total
        this.xmZongshu = Math.ceil( math.divide(response.total,this.xmQueryParams.pageSize) )
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let queryParams = {...this.queryParams}
      let dateRange = queryParams.dateRange || []
      if(dateRange.length) {
        queryParams.startDate = dateRange[0]
        queryParams.endDate = dateRange[1]
      }
      delete queryParams.dateRange
      listProjUser(queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
